<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--安装Elementui环境
        1.前端脚手架   webpack安装  npm i element-ui -S
        2.引入下载好的离线包或在线文件
    -->
    <!--1.先引入vue.js-->
    <script src="../js/vue.js"></script>
    <!--2.引入elementui的js-->
    <!--<script src="plugins/elementui/index.js"></script>-->
    <script src="element-ui/lib/index.js"></script>
    <!--3.引入elemetentui样式的css-->
    <!--<link rel="stylesheet" href="plugins/elementui/index.css">-->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

</head>
<body>
    <!--准备容器  模版-->
<div id="app">
  <!--使用elementui组件-->
    <!--行-->
    <el-row>
        <el-button type="success" plain round>按钮</el-button>
        <el-button type="danger" plain circle icon="el-icon-video-camera-solid"></el-button>
    </el-row>

    <el-row>
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
    </el-row>

    <el-row>
        <el-button plain>朴素按钮</el-button>
        <el-button type="primary" plain>主要按钮</el-button>
        <el-button type="success" plain>成功按钮</el-button>
        <el-button type="info" plain>信息按钮</el-button>
        <el-button type="warning" plain>警告按钮</el-button>
        <el-button type="danger" plain>危险按钮</el-button>
    </el-row>

    <el-row>
        <el-button round>圆角按钮</el-button>
        <el-button type="primary" round>主要按钮</el-button>
        <el-button type="success" round>成功按钮</el-button>
        <el-button type="info" round>信息按钮</el-button>
        <el-button type="warning" round>警告按钮</el-button>
        <el-button type="danger" round>危险按钮</el-button>
    </el-row>

    <el-row>
        <el-button icon="el-icon-search" circle></el-button>
        <el-button type="primary" icon="el-icon-edit" circle></el-button>
        <el-button type="success" icon="el-icon-check" circle></el-button>
        <el-button type="info" icon="el-icon-message" circle></el-button>
        <el-button type="warning" icon="el-icon-star-off" circle></el-button>
        <el-button type="danger" icon="el-icon-delete" circle></el-button>
    </el-row>





</div>
</body>
</html>

<script>
    new Vue({
        el:'#app',
        data(){
            return{
                name:'张三'
            }
        }
    });

</script>
